<script setup lang="ts">
import { ref } from 'vue';

const onClickItem = (item, index) => {
  // alert(index);
  console.log('onClickItem', item, index);
};

const list = ref([
  {
    items: [] as object[],
    refreshing: false,
    loading: false,
    error: false,
    finished: false,
    historyArray: ['A', 'B'],
  },
  {
    items: [] as object[],
    refreshing: false,
    loading: false,
    error: false,
    finished: false,
  },
  {
    items: [] as object[],
    refreshing: false,
    loading: false,
    error: false,
    finished: false,
  },
]);

const onLoad = (index: number, val: string) => {
  console.log(`onLoad:${val}`, re);
  debugger;
  const currentList = list.value[index];
  currentList.loading = true;

  console.log('aaaaaaaaaaaaaaaaaaa');

  setTimeout(() => {
    // debugger;
    if (currentList.refreshing) {
      currentList.items = [];
      currentList.refreshing = false;
    }

    if (val) {
      alert(3333);
      currentList.items.push({
        title: `title`,
        thumb:
          'https://camo.githubusercontent.com/3f50c01f4ac4cce54ef4c19f0c961a1366ad573224bd6d986de120a3b496d92c/68747470733a2f2f63646e2e7175617361722e6465762f73706f6e736f72732f6d696f2d61622e737667',
        na1: '那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。',
        co1: 'text',
      });
      currentList.finished = true;
    } else {
      for (let i = 0; i < 10; i++) {
        const text = currentList.items.length + 1;
        // currentList.items.push(text < 10 ? '0' + text : String(text));
        currentList.items.push({
          title: `title_${i}`,
          thumb:
            'https://camo.githubusercontent.com/3f50c01f4ac4cce54ef4c19f0c961a1366ad573224bd6d986de120a3b496d92c/68747470733a2f2f63646e2e7175617361722e6465762f73706f6e736f72732f6d696f2d61622e737667',
          na1: '那一天我二十一岁，在我一生的黄金时代。我有好多奢望。我想爱，想吃，还想在一瞬间变成天上半明半暗的云。后来我才知道，生活就是个缓慢受锤的过程，人一天天老下去，奢望也一天天消失，最后变得像挨了锤的牛一样。可是我过二十一岁生日时没有预见到这一点。我觉得自己会永远生猛下去，什么也锤不了我。',
          co1: text,
        });
      }
    }

    currentList.loading = false;
    currentList.refreshing = false;

    // show error info in second demo
    if (index === 1 && currentList.items.length == 10 && !currentList.error) {
      currentList.error = true;
      currentList.items = [];
    } else {
      currentList.error = false;
    }

    if (currentList.items.length >= 100) {
      currentList.finished = true;
    }

    console.log('bbbbbb', currentList);
  }, 1000);
};

const onRefresh = (index: number, val: string) => {
  console.log(`onRefresh:${val}`);
  list.value[index].finished = false;
  // list.value[index].loading = true;
  onLoad(index, val);
};

const itemTemplateGeneral = [
  {
    type: 'title',
    valueType: 'field',
    field: 'title',
    expression: '',
    ellipsis: false,
    demo: '',
  },
  {
    type: 'thumb',
    valueType: 'expression',
    field: '',
    expression: '${thumb}',
    ellipsis: false,
    demo: '',
  },
  {
    type: 'info',
    valueType: 'field',
    field: 'na1',
    expression: '',
    ellipsis: true,
    demo: '',
  },
  {
    type: 'info',
    valueType: 'expression',
    field: '',
    expression: '${na1} -- ${co1}',
    ellipsis: false,
    demo: '',
  },
];

const re = ref();
const l = {
  items: [] as object[],
  refreshing: false,
  loading: false,
  error: false,
  finished: false,
};
</script>

<template>
  <div>
    <div class="tr-label-prefix-wraper tr-label-prefix-wraper-left">
      <span class="tr-label-prefix">
        <span class="t-label"> 仅搜索图表 </span>
      </span>
      <t-popup-search
        ref="re"
        :totalCount="33"
        placeholder="请输入"
        :itemTemplateGeneral="itemTemplateGeneral"
        :loading="list[0].loading"
        :finished="list[0].finished"
        v-model:refreshing="list[0].refreshing"
        :finished-text="'finishedText'"
        :error="list[0].error"
        @load="val => onLoad(0, val)"
        @refresh="val => onRefresh(0, val)"
        :rows="list[0].items"
        @clickItem="onClickItem"
      >
      </t-popup-search>
    </div>
    <div class="tr-label-prefix-wraper tr-label-prefix-wraper-left">
      <span class="tr-label-prefix">
        <span class="t-label"> 显示搜索框 </span>
      </span>
      <t-popup-search
        :showSearchBar="true"
        :totalCount="333"
        placeholder="请输入"
        :itemTemplateGeneral="itemTemplateGeneral"
        :loading="list[1].loading"
        :finished="list[1].finished"
        :error="list[1].error"
        v-model:refreshing="list[1].refreshing"
        :finished-text="'finishedText'"
        @load="val => onLoad(1, val)"
        @refresh="val => onRefresh(1, val)"
        :rows="list[1].items"
        @clickItem="onClickItem"
      >
      </t-popup-search>
    </div>
  </div>
</template>

<style lang="less"></style>
